import React, { Component } from 'react'
import TodoListItem from './TodoListItem'
import propTypes from 'prop-types'

export default class TodoList extends Component {

  static propTypes = {
    todos: propTypes.array
  }
  //切换完成状态
  qiehuanisok = (id) => {
    this.props.Qiehuanisok(id)
  }
  //删除待办事项
  deleteitem = (id) => {
    this.props.deletItem(id)
  }
  //删除选中的待办事项
  // deletgouxuan = (ids) => {
  //   this.props.deletexz(ids)
  // }

  render() {
    const { todos } = this.props
    return (
      todos.length
      ?
      <div className="container">
        <ul className="columns is-mobile is-multiline">
          {
          todos.map(todo => <TodoListItem
            key={todo.id}
            {...todo}
            changeisok={this.qiehuanisok}
            Delet={this.deleteitem}
            gouxuan={this.deletgouxuan}
            />)
          }
        </ul>
      </div>
      :
      <div className="container">
        待办事项列表为空，请去添加待办事项
      </div>  
    )
  }
}
